<template>
  <view class="list">
    <view class="item" v-for="(item, index) in list" :key="index">
      <view class="item-content flex flex-ai-c font-23 color-999">
        <i-icon
          icon="iconcontact-person"
          type="single"
          size="24rpx"
          color="#999"
        ></i-icon>
        <view class="item-left">联系人：</view>
        <view class="color-333 flex-1">{{ item.admin_name }}</view>
        <view v-if="item.isRegister" class="color-999">已加入</view>
        <view v-else class="color-F30000">邀请未注册</view>
      </view>
      <view class="item-content flex flex-ai-c font-23 color-999">
        <i-icon
          icon="icondianhua01"
          type="single"
          size="24rpx"
          color="#999"
        ></i-icon>
        <view class="item-left">联系电话：</view>
        <view class="color-333">{{ item.admin_mobile | filterTel }}</view>
      </view>
      <view class="item-content flex flex-ai-c font-23 color-999">
        <i-icon
          icon="iconquanxianguanli"
          type="single"
          size="24rpx"
          color="#999"
        ></i-icon>
        <view class="item-left">管理权限：</view>
        <view class="color-333">站点数{{ item.station_num }}</view>
      </view>
      <u-line margin="28rpx 0 0" color="#eee"></u-line>
      <view
        class="nav flex flex-ai-c flex-jc-sb"
        @click="gotoPage(item.station_id)"
      >
        <view class="font-28 color-333">经营报表</view>
        <u-icon name="arrow-right" color="#999" size="24rpx"></u-icon>
      </view>
      <view class="btn-wrap flex font-28 flex-ai-c">
        <view class="btn flex-ac-c" @click="$u.debounce(del, 500)">删除</view>
        <u-line
          color="#eee"
          direction="col"
          length="30rpx"
          :hair-line="false"
        />
        <view class="btn2 flex-1" @click="edit(item)">编辑</view>
      </view>
    </view>
    <view v-if="list.length === 0 && showDefault" class="default-wrap">
      <default-img msg="暂无数据"></default-img>
    </view>
    <view class="btn-wrap2">
      <button class="btn-primary" @click="$u.debounce(add, 500)">
        新增管理
      </button>
    </view>
    <!--   删除-电话弹窗-->
    <u-popup
      v-model="showPopup"
      mode="center"
      :mask="true"
      width="690"
      border-radius="20"
    >
      <view class="popup-content">
        <view class="title">客服将协助您进行此操作</view>
        <view class="content">400-090-9987</view>
        <u-line color="#eee" :hair-line="false" />
        <view class="btn-box flex flex-ai-c">
          <button class="btn-left" @click="cancel">取消</button>
          <u-line
            color="#eee"
            direction="col"
            length="40rpx"
            :hair-line="false"
          />
          <button class="btn-right" @click="okey">拨打</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  data() {
    return {
      showPopup: false,
      list: [],
      showDefault: false,
    };
  },

  computed: {
    storeId() {
      return this.$store.state.userInfoDetail.store.storeId;
    },
  },

  filters: {
    filterTel(tel) {
      let reg = /^(\d{3})\d*(\d{4})$/;
      return tel.replace(reg, "$1****$2");
    },
  },

  onShow() {
    this.getPermissionList();
  },

  methods: {
    //权限列表
    getPermissionList() {
      this.$api.washCar
        .getPermissionList({
          pageIndex: 1,
          pageSize: 100,
          storeid: this.storeId,
          ismanaged: true, //是否管理 true是已被管理列表
        })
        .then((res) => {
          if (res.data.list.length) {
            this.list = res.data.list;
          } else {
            this.showDefault = true;
          }
        })
        .catch((err) => {
          console.log(err);
          uni.showToast({
            title: err,
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 2000);
        });
    },

    // filterTel(phone) {
    //   return phone.replace(/^(\d{3})\d*(\d{4})$/, "$1****$2");
    // },

    // 跳转经营日报
    gotoPage(stationId) {
      uni.navigateTo({
        url: "/pages_washCar/report_form/report_form?id=" + stationId,
      });
    },

    // 编辑
    edit(data) {
      uni.navigateTo({
        url: "/pages_washCar/sitePermission/addPermission?id=" + data.id+ "&admin=" + data.admin_id
      });
    },

    add() {
      uni.navigateTo({
        url: "/pages_washCar/sitePermission/addPermission",
      });
    },

    // 删除
    del() {
      this.showPopup = true;
    },

    // 关闭弹窗
    cancel() {
      this.showPopup = false;
    },
    // 拨打客服电话
    okey() {
      this.showPopup = false;
      uni.makePhoneCall({
        phoneNumber: "4000909987",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.list {
  padding: 10rpx 24rpx;
  font-weight: 500;

  .item {
    background: #ffffff;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(31, 31, 31, 0.1);
    border-radius: 10px;
    padding: 25rpx 20rpx 0;
    margin-bottom: 34rpx;
    .item-content {
      padding-top: 28rpx;
      .item-left {
        padding-left: 17rpx;

        width: 157rpx;
      }
    }

    .nav {
      padding: 36rpx 0;
    }
    .btn-wrap {
      height: 90rpx;
      line-height: 90rpx;
    }
    .btn {
      width: 50%;
      color: #f30000;
      text-align: center;
    }

    .btn2 {
      text-align: center;
      color: #38acff;
    }
  }

  .btn-wrap2 {
    padding-bottom: 16rpx;
  }
}

.color-F30000 {
  color: #f30000;
}

// 提示弹框
.popup-content {
  // padding: 30rpx 0;
  text-align: center;

  .title {
    padding-top: 28rpx;
    font-size: 26rpx;
    font-weight: 500;
    color: #666;
  }

  .content {
    padding: 40rpx 0;
    font-size: 36rpx;
    font-weight: 500;
    color: #38acff;
  }

  .btn-box {
    .btn {
      height: 100rpx;
      font-size: 28rpx;
      color: #999;
    }

    .btn-left {
      width: 50%;
      height: 78rpx;
      font-size: 30rpx;
      background: #fff;
      color: #999;
    }

    .btn-right {
      width: 50%;
      height: 78rpx;
      font-size: 30rpx;
      color: #38acff;
      background: #fff;
    }
  }
}

.default-wrap {
  height: calc(100vh - 120rpx);
}

/deep/ uni-button:after {
  border: none;
}
</style>
